<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <link type="text/css" rel="stylesheet" href="./css/common.css" />
    <link type="text/css" rel="stylesheet" href="./css/glass.css" />
    <link type="text/css" rel="stylesheet" href="./css/main.css" />
    <link type="text/css" rel="stylesheet" href="./js/lib/video.js/video.css" />
    <script src="./js/lib/jquery/jquery.min.js"></script>
    <script src="./js/lib/angular/angular.min.js"></script>
    <script src="./js/lib/angular/angular-sanitize.js"></script>
    <script src="./js/lib/highcharts/highcharts.js"></script>
    <script src="./js/lib/highcharts/highcharts-more.js"></script>
    <script src="./js/lib/highcharts/highcharts-3d.js"></script>
    <script src="./js/lib/highcharts/modules/funnel.js"></script>
    <script src="./js/lib/highcharts/themes/dark-unica.js"></script>
    <script src="./js/data.js"></script>

    <script src="./js/lib/video.js/video.js"></script>
  </head>

  <body>
    <div ng-app="app" ng-controller="controller" ng-cloak>
      <div class="fixed-wrapper">
        <div class="fixed">
          <div>
            <img width="35" src="../resource/images/logo.png" />
            <div class="title">智慧园区管理平台</div>
          </div>
          <div>
            <div class="message" ng-click="showMessage()">
              <div class="message-icon"></div>
              <div style="font-size: 16px" ng-class="messageClass">
                {{data.message.alarm.amount}}
              </div>
            </div>
            <div>
              <iframe
                scrolling="no"
                src="https://tianqiapi.com/api.php?color=cdcdcd&fontsize=18&align=center&paddingtop=5"
                frameborder="0"
                width="250"
                height="30"
                allowtransparency="true"
              ></iframe>
            </div>
            <div style="display: flex">
              <div class="split-line"></div>
              <div class="time">{{time}}</div>
            </div>
            <div style="display: flex">
              <div class="split-line"></div>
              <div class="portrait"></div>
              <div>Admin</div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-wrapper">
        <div class="bottom">
          <div ng-class="bclass[1]" ng-click="fire()">消防</div>
          <div ng-class="bclass[2]" ng-click="security()">安防</div>
          <div ng-class="bclass[3]" ng-click="equipment()">设备</div>
          <div ng-click="home()" class="home"></div>
          <div ng-class="bclass[4]" ng-click="operate()">运营</div>
          <div ng-class="bclass[5]" ng-click="maintain()">运维</div>
          <div ng-class="bclass[6]" ng-click="save()">节能</div>
        </div>
      </div>
      <div class="glass-wrapper message-wrapper">
        <div class="glass-right-wrapper">
          <div class="close-icon" onclick="closeWrapper(this)"></div>
          <div>
            <div class="msg-type">
              <div
                ng-class="mclass[0]"
                ng-click="changeMessageType('alarm', 0)"
              >
                报警信息
              </div>
              <div
                ng-class="mclass[1]"
                ng-click="changeMessageType('order', 1)"
              >
                工单信息
              </div>
              <div ng-class="mclass[2]" ng-click="changeMessageType('fix', 2)">
                维修信息
              </div>
              <div
                ng-class="mclass[3]"
                ng-click="changeMessageType('patrol', 3)"
              >
                巡防信息
              </div>
            </div>
            <div>
              <div class="msg-num">
                <div>{{data.message[messageType].amount}}</div>
              </div>
              <div class="msg-record">
                <div
                  ng-repeat="r in data.message[messageType].records"
                  ng-click="focusIncident(r.id)"
                >
                  <div>{{$index + 1}}</div>
                  <div>{{r.info}}</div>
                  <div>{{r.delay}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="glass-wrapper home-wrapper">
        <div class="glass-left-wrapper">
          <div class="close-icon" onclick="closeWrapper(this)"></div>
          <div>
            <div class="title">能耗监测</div>
            <div class="he-data">
              <div>
                <div>今年总能耗</div>
                <div>{{data.home.energy.total}}</div>
              </div>
              <div>
                <div>今年计划年耗</div>
                <div class="drill" ng-click="showEnergy()">
                  {{data.home.energy.plan}}
                </div>
              </div>
            </div>
            <div id="hc-energy" class="hc"></div>
          </div>
          <div>
            <div class="title">停车场管理</div>
            <div class="hp">
              <div id="hc-park" class="hc"></div>
              <div class="hp-data">
                <div>总车位 {{data.home.park.total}}</div>
                <div>可用车位 {{data.home.park.available}}</div>
                <div>占用车位 {{data.home.park.used}}</div>
                <div></div>
              </div>
            </div>
          </div>
        </div>
        <div class="glass-right-wrapper">
          <div class="close-icon" onclick="closeWrapper(this)"></div>
          <div>
            <div class="title">今日报警概览</div>
            <div class="ha-data">
              <div>
                <div class="ha-num i">{{data.home.alarm.i}}</div>
                <div>I级报警</div>
              </div>
              <div>
                <div class="ha-num ii">{{data.home.alarm.ii}}</div>
                <div>II级报警</div>
              </div>
              <div>
                <div class="ha-num iii">{{data.home.alarm.iii}}</div>
                <div>III级报警</div>
              </div>
            </div>
            <div id="hc-alarm" class="hc"></div>
          </div>
          <div>
            <div class="title">基础信息</div>
            <div class="hs-data">
              <div>
                <div>子系统数</div>
                <div>已检测时间</div>
                <div>已节能</div>
                <div>已节省费用</div>
              </div>
              <div>
                <div>{{data.home.save.system}}</div>
                <div>{{data.home.save.period}}</div>
                <div>{{data.home.save.save}}</div>
                <div>&#165; {{data.home.save.cost}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="glass-wrapper fire-wrapper">
        <div class="glass-left-wrapper">
          <div class="close-icon" onclick="closeWrapper(this)"></div>
          <div>
            <div class="title">消防报警</div>
            <div class="fa-data">
              <div>
                <div>
                  <div>总报警数</div>
                  <div>
                    <span class="fa-num">{{data.fire.alarm.total}}</span>次
                  </div>
                </div>
                <div>
                  <div>火警隐患</div>
                  <div>
                    <span class="fa-num">{{data.fire.alarm.danger}}</span>次
                  </div>
                </div>
              </div>
              <div>
                <div>
                  <div>待处理数</div>
                  <div>
                    <span class="fa-num">{{data.fire.alarm.wait}}</span>次
                  </div>
                </div>
                <div>
                  <div>误报数</div>
                  <div>
                    <span class="fa-num">{{data.fire.alarm.mistake}}</span>次
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="title">消防设备统计</div>
            <div class="fe-data">
              <div>
                <div>总设备数</div>
                <div>
                  <span class="fa-num" style="color: #fff"
                    >{{data.fire.equipment.total}}</span
                  >个
                </div>
              </div>
              <div>
                <div>异常数</div>
                <div>
                  <span class="fa-num">{{data.fire.equipment.exception}}</span
                  >个
                </div>
              </div>
              <div>
                <div>设备完好率</div>
                <div>
                  <span class="fa-num" style="color: #fff"
                    >{{data.fire.equipment.intact}}</span
                  >%
                </div>
              </div>
            </div>
            <div id="hc-equipment" class="hc"></div>
          </div>
        </div>
        <div class="glass-right-wrapper">
          <div class="close-icon" onclick="closeWrapper(this)"></div>
          <div>
            <div class="title">处理时间跟踪</div>
            <div class="ft">
              <div id="hc-track" class="hc"></div>
              <div class="ft-data">
                <div>
                  <div>I级</div>
                  <div>
                    <span class="ft-num" style="color: green"
                      >{{data.fire.track.i}}</span
                    >s
                  </div>
                </div>
                <div>
                  <div>II级</div>
                  <div>
                    <span class="ft-num" style="color: green"
                      >{{data.fire.track.ii}}</span
                    >s
                  </div>
                </div>
                <div>
                  <div>III级</div>
                  <div>
                    <span class="ft-num" style="color: yellow"
                      >{{data.fire.track.iii}}</span
                    >s
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="title">报警级别统计</div>
            <div id="hc-level" class="hc"></div>
          </div>
        </div>
      </div>
      <div class="glass-wrapper security-wrapper">
        <div class="glass-left-wrapper">
          <div class="close-icon" onclick="closeWrapper(this)"></div>
          <div>
            <div class="title">安防报警</div>
            <div class="ha-data">
              <div>
                <div class="ha-num i">{{data.home.alarm.i}}</div>
                <div>I级报警</div>
              </div>
              <div>
                <div class="ha-num ii">{{data.home.alarm.ii}}</div>
                <div>II级报警</div>
              </div>
              <div>
                <div class="ha-num iii">{{data.home.alarm.iii}}</div>
                <div>III级报警</div>
              </div>
            </div>
            <div id="hc-alarm-type" class="hc"></div>
          </div>
          <div>
            <div class="title">视频监控</div>
            <div class="sm-data">
              <div>
                <div>
                  <div class="video-info">
                    {{data.security.monitor[0].location}}<span
                      class="video-signal"
                      ng-style="{'background': data.security.monitor[0].signal}"
                    ></span>
                  </div>
                  <video
                    class="video-js"
                    muted
                    loop
                    autoplay
                    preload="auto"
                    width="160"
                    height="120"
                    data-setup="{}"
                  >
                    <source src="../resource/video/test.mp4" type="video/mp4" />
                    <p class="vjs-no-js">
                      To view this video please enable JavaScript, and consider
                      upgrading to a web browser that
                      <a
                        href="https://videojs.com/html5-video-support/"
                        target="_blank"
                        >supports HTML5 video</a
                      >
                    </p>
                  </video>
                </div>
                <div>
                  <div class="video-info">
                    {{data.security.monitor[1].location}}<span
                      class="video-signal"
                      ng-style="{'background': data.security.monitor[1].signal}"
                    ></span>
                  </div>
                  <video
                    class="video-js"
                    muted
                    loop
                    autoplay
                    preload="auto"
                    width="160"
                    height="120"
                    data-setup="{}"
                  >
                    <source src="../resource/video/test.mp4" type="video/mp4" />
                    <p class="vjs-no-js">
                      To view this video please enable JavaScript, and consider
                      upgrading to a web browser that
                      <a
                        href="https://videojs.com/html5-video-support/"
                        target="_blank"
                        >supports HTML5 video</a
                      >
                    </p>
                  </video>
                </div>
              </div>
              <div>
                <div>
                  <div class="video-info">
                    {{data.security.monitor[2].location}}<span
                      class="video-signal"
                      ng-style="{'background': data.security.monitor[2].signal}"
                    ></span>
                  </div>
                  <video
                    class="video-js"
                    muted
                    loop
                    autoplay
                    preload="auto"
                    width="160"
                    height="120"
                    data-setup="{}"
                  >
                    <source src="../resource/video/test.mp4" type="video/mp4" />
                    <p class="vjs-no-js">
                      To view this video please enable JavaScript, and consider
                      upgrading to a web browser that
                      <a
                        href="https://videojs.com/html5-video-support/"
                        target="_blank"
                        >supports HTML5 video</a
                      >
                    </p>
                  </video>
                </div>
                <div>
                  <div class="video-info">
                    {{data.security.monitor[3].location}}<span
                      class="video-signal"
                      ng-style="{'background': data.security.monitor[3].signal}"
                    ></span>
                  </div>
                  <video
                    class="video-js"
                    muted
                    loop
                    autoplay
                    preload="auto"
                    width="160"
                    height="120"
                    data-setup="{}"
                  >
                    <source src="../resource/video/test.mp4" type="video/mp4" />
                    <p class="vjs-no-js">
                      To view this video please enable JavaScript, and consider
                      upgrading to a web browser that
                      <a
                        href="https://videojs.com/html5-video-support/"
                        target="_blank"
                        >supports HTML5 video</a
                      >
                    </p>
                  </video>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="glass-right-wrapper">
          <div class="close-icon" onclick="closeWrapper(this)"></div>
          <div>
            <div class="title">今日概况</div>
            <div id="hc-level-s" class="hc"></div>
          </div>
          <div>
            <div class="title">设备概况</div>
            <div class="se-data">
              <div>
                <div class="card">
                  <div>摄像头</div>
                  <div>
                    <div>总数：{{data.security.equipment.camera.total}}</div>
                    <div>
                      故障：{{data.security.equipment.camera.exception}}
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div>巡更</div>
                  <div>
                    <div>总数：{{data.security.equipment.patrol.total}}</div>
                    <div>
                      故障：{{data.security.equipment.patrol.exception}}
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div>广播</div>
                  <div>
                    <div>总数：{{data.security.equipment.broadcast.total}}</div>
                    <div>
                      故障：{{data.security.equipment.broadcast.exception}}
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div>人脸识别</div>
                  <div>
                    <div>总数：{{data.security.equipment.faceAI.total}}</div>
                    <div>
                      故障：{{data.security.equipment.faceAI.exception}}
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <div class="card">
                  <div>门禁</div>
                  <div>
                    <div>总数：{{data.security.equipment.AC.total}}</div>
                    <div>故障：{{data.security.equipment.AC.exception}}</div>
                  </div>
                </div>
                <div class="card">
                  <div>防盗</div>
                  <div>
                    <div>总数：{{data.security.equipment.TP.total}}</div>
                    <div>故障：{{data.security.equipment.TP.exception}}</div>
                  </div>
                </div>
                <div class="card">
                  <div>照明</div>
                  <div>
                    <div>总数：{{data.security.equipment.light.total}}</div>
                    <div>故障：{{data.security.equipment.light.exception}}</div>
                  </div>
                </div>
                <div class="card">
                  <div>智能网关</div>
                  <div>
                    <div>总数：{{data.security.equipment.network.total}}</div>
                    <div>
                      故障：{{data.security.equipment.network.exception}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="glass-wrapper operate-wrapper">
        <div class="glass-left-wrapper">
          <div class="close-icon" onclick="closeWrapper(this)"></div>
          <div>
            <div class="title">门禁监测</div>
            <div class="op-data">
              <div>
                <div>累计人流数</div>
                <div><span>{{data.operate.todayPeople.sum}}</span>人</div>
              </div>
              <div>
                <div>最高流速</div>
                <div>
                  <span>{{data.operate.todayPeople.maxSpeed}}</span>人/时
                </div>
              </div>
            </div>
            <div class="op-data">
              <div>
                <div>当前总人数</div>
                <div><span>{{data.operate.todayPeople.total}}</span>人</div>
              </div>
              <div>
                <div>平均流速</div>
                <div>
                  <span>{{data.operate.todayPeople.avgSpeed}}</span>人/时
                </div>
              </div>
            </div>
            <div class="op-slider">
              <div>
                <div
                  class="op-card"
                  ng-repeat="p in data.operate.todayPeople.people"
                >
                  <div>
                    <div>{{p.camera}}</div>
                    <div>计数：{{p.amount}}</div>
                  </div>
                  <div ng-style="{'backgroundImage': p.image}"></div>
                  <div>
                    <div>
                      <div>姓名：{{p.name}}</div>
                      <div>类型：{{p.type}}</div>
                    </div>
                    <div>员工编号：{{p.code}}</div>
                    <div>识别时间：{{p.time}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="title">今日各时段人流量统计</div>
            <div id="hc-people" class="hc"></div>
          </div>
        </div>
        <div class="glass-right-wrapper">
          <div class="close-icon" onclick="closeWrapper(this)"></div>
          <div>
            <div class="title">今日各时段停车分布</div>
            <div id="hc-park-o" class="hc"></div>
          </div>
          <div>
            <div class="title">节能目标完成情况</div>
            <div id="hc-save-target" class="hc"></div>
          </div>
        </div>
      </div>
      <div class="glass-wrapper maintain-wrapper">
        <div class="glass-left-wrapper">
          <div class="close-icon" onclick="closeWrapper(this)"></div>
          <div>
            <div class="title">今日工单各维度统计</div>
            <div id="hc-order" class="hc"></div>
            <div class="mo-data">
              <div>工单总数：{{data.maintain.order.total}}</div>
              <div>待处理数：{{data.maintain.order.wait}}</div>
            </div>
          </div>
          <div>
            <div class="title">维修类型统计</div>
            <div id="hc-fix" class="hc"></div>
            <div class="mf-data">
              <div>总个数：{{data.maintain.fix.total}}</div>
              <div>待处理：{{data.maintain.fix.wait}}</div>
              <div>已完成：{{data.maintain.fix.done}}</div>
            </div>
          </div>
        </div>
        <div class="glass-right-wrapper">
          <div class="close-icon" onclick="closeWrapper(this)"></div>
          <div>
            <div class="title">巡检情况</div>
            <div class="mp-data">
              <div>
                <div>总巡检数：{{data.maintain.patrolStatus.total}}</div>
                <div>已巡检：{{data.maintain.patrolStatus.done}}</div>
                <div>
                  <div>计划完成度：{{data.maintain.patrolStatus.plan}}</div>
                  <div>实际完成度：{{data.maintain.patrolStatus.real}}</div>
                </div>
              </div>
              <div>
                <div>漏巡：{{data.maintain.patrolStatus.forget}}</div>
                <div>待巡：{{data.maintain.patrolStatus.wait}}</div>
                <div>迟到：{{data.maintain.patrolStatus.late}}</div>
              </div>
            </div>
          </div>
          <div>
            <div class="title">巡检结果统计</div>
            <div id="hc-patrol" class="hc"></div>
          </div>
          <div>
            <div class="title">大楼资产汇总</div>
            <div class="mb-data">
              <div ng-repeat="d in data.maintain.assets.data">
                <div>{{d.name}}</div>
                <div>{{d.amount}}万</div>
                <div>
                  {{d.offset}}万<span
                    class="rate-arrow"
                    ng-class="d.offset > 0 ? 'myrateup' : 'myratedown'"
                  ></span>
                </div>
                <div>
                  {{d.rate}}%<span
                    class="rate-arrow"
                    ng-class="d.rate > 0 ? 'myrateup' : 'myratedown'"
                  ></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="glass-wrapper save-wrapper">
        <div class="glass-left-wrapper">
          <div class="close-icon" onclick="closeWrapper(this)"></div>
          <div>
            <div class="title">能耗统计</div>
            <div class="tabs">
              <div ng-class="eeclass[0]" ng-click="showEnergyData(1)">数值</div>
              <div ng-class="eeclass[1]" ng-click="showEnergyData(0)">费用</div>
            </div>
            <div ng-show="isShowEnergyData">
              <div class="realtime-type">
                <div ng-class="eteclass[0]" ng-click="changeEnergyData('d', 0)">
                  日
                </div>
                <div ng-class="eteclass[1]" ng-click="changeEnergyData('m', 1)">
                  月
                </div>
                <div ng-class="eteclass[2]" ng-click="changeEnergyData('y', 2)">
                  年
                </div>
              </div>
              <div class="sae-data">
                <div>
                  <div>
                    {{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].electric.label}}
                  </div>
                  <div>
                    <span class="sae-num"
                      >{{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].electric.amount}}</span
                    >
                    kWh
                  </div>
                  <div class="sae-ht">
                    <div>
                      环比<span
                        class="rate-arrow"
                        ng-class="data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].electric.hb > 0 ? 'myrateup' : 'myratedown'"
                        >{{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].electric.hb}}%</span
                      >
                    </div>
                    <div>
                      同比<span
                        class="rate-arrow"
                        ng-class="data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].electric.tb > 0 ? 'myrateup' : 'myratedown'"
                        >{{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].electric.tb}}%</span
                      >
                    </div>
                  </div>
                </div>
                <div>
                  <div>
                    <div>
                      {{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].water.label}}
                    </div>
                    <div>
                      <span class="sae-num"
                        >{{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].water.amount}}</span
                      >
                      m<sup>3</sup>
                    </div>
                    <div class="sae-ht">
                      <div>
                        环比<span
                          class="rate-arrow"
                          ng-class="data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].water.hb > 0 ? 'myrateup' : 'myratedown'"
                          >{{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].water.hb}}%</span
                        >
                      </div>
                      <div>
                        同比<span
                          class="rate-arrow"
                          ng-class="data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].water.tb > 0 ? 'myrateup' : 'myratedown'"
                          >{{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].water.tb}}%</span
                        >
                      </div>
                    </div>
                  </div>
                  <div>
                    <div>
                      {{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].gas.label}}
                    </div>
                    <div>
                      <span class="sae-num"
                        >{{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].gas.amount}}</span
                      >
                      m<sup>3</sup>
                    </div>
                    <div class="sae-ht">
                      <div>
                        环比<span
                          class="rate-arrow"
                          ng-class="data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].gas.hb > 0 ? 'myrateup' : 'myratedown'"
                          >{{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].gas.hb}}%</span
                        >
                      </div>
                      <div>
                        同比<span
                          class="rate-arrow"
                          ng-class="data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].gas.tb > 0 ? 'myrateup' : 'myratedown'"
                          >{{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].gas.tb}}%</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div ng-show="!isShowEnergyData">
              <div class="realtime-type">
                <div ng-class="etcclass[0]" ng-click="changeEnergyData('d', 0)">
                  日
                </div>
                <div ng-class="etcclass[1]" ng-click="changeEnergyData('m', 1)">
                  月
                </div>
                <div ng-class="etcclass[2]" ng-click="changeEnergyData('y', 2)">
                  年
                </div>
              </div>
              <div class="sae-data">
                <div>
                  <div>
                    {{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].electric.label}}
                  </div>
                  <div>
                    &#165;
                    <span class="sae-num"
                      >{{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].electric.amount}}</span
                    >
                  </div>
                  <div class="sae-ht">
                    <div>
                      环比<span
                        class="rate-arrow"
                        ng-class="data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].electric.hb > 0 ? 'myrateup' : 'myratedown'"
                        >{{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].electric.hb}}%</span
                      >
                    </div>
                    <div>
                      同比<span
                        class="rate-arrow"
                        ng-class="data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].electric.tb > 0 ? 'myrateup' : 'myratedown'"
                        >{{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].electric.tb}}%</span
                      >
                    </div>
                  </div>
                </div>
                <div>
                  <div>
                    <div>
                      {{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].water.label}}
                    </div>
                    <div>
                      &#165;
                      <span class="sae-num"
                        >{{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].water.amount}}</span
                      >
                    </div>
                    <div class="sae-ht">
                      <div>
                        环比<span
                          class="rate-arrow"
                          ng-class="data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].water.hb > 0 ? 'myrateup' : 'myratedown'"
                          >{{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].water.hb}}%</span
                        >
                      </div>
                      <div>
                        同比<span
                          class="rate-arrow"
                          ng-class="data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].water.tb > 0 ? 'myrateup' : 'myratedown'"
                          >{{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].water.tb}}%</span
                        >
                      </div>
                    </div>
                  </div>
                  <div>
                    <div>
                      {{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].gas.label}}
                    </div>
                    <div>
                      &#165;
                      <span class="sae-num"
                        >{{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].gas.amount}}</span
                      >
                    </div>
                    <div class="sae-ht">
                      <div>
                        环比<span
                          class="rate-arrow"
                          ng-class="data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].gas.hb > 0 ? 'myrateup' : 'myratedown'"
                          >{{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].gas.hb}}%</span
                        >
                      </div>
                      <div>
                        同比<span
                          class="rate-arrow"
                          ng-class="data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].gas.tb > 0 ? 'myrateup' : 'myratedown'"
                          >{{data.save.energy[isShowEnergyData?'data':'cost'][energyPeriod].gas.tb}}%</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="title">能耗Top5</div>
            <div id="hc-energy-top5" class="hc"></div>
          </div>
        </div>
        <div class="glass-right-wrapper">
          <div class="close-icon" onclick="closeWrapper(this)"></div>
          <div>
            <div class="title">能耗预测</div>
            <div class="realtime-type">
              <div
                ng-class="exclass[0]"
                ng-click="changeEnergyExpect('tomorrow', 0)"
              >
                {{data.save.expect.tomorrow.label}}
              </div>
              <div
                style="
                  border-right: 1px solid rgba(255, 255, 255, 0.5);
                  padding-left: 11px;
                "
                ng-class="exclass[1]"
                ng-click="changeEnergyExpect('nextmonth', 1)"
              >
                {{data.save.expect.nextmonth.label}}
              </div>
            </div>
            <div class="saex-data">
              <div>
                <div class="saex-icon saex-e"></div>
                <div>
                  <div>
                    <div>{{data.save.expect[expectPeriod].label}}总用电量</div>
                    <div>
                      <span class="sae-num"
                        >{{data.save.expect[expectPeriod].electric.amount}}</span
                      >
                      kWh
                    </div>
                  </div>
                  <div>
                    <div>费用</div>
                    <div>
                      &#165;
                      <span class="sae-num"
                        >{{data.save.expect[expectPeriod].electric.cost}}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <div class="saex-icon saex-w"></div>
                <div>
                  <div>
                    <div>{{data.save.expect[expectPeriod].label}}总用水量</div>
                    <div>
                      <span class="sae-num"
                        >{{data.save.expect[expectPeriod].water.amount}}</span
                      >
                      m<sup>3</sup>
                    </div>
                  </div>
                  <div>
                    <div>费用</div>
                    <div>
                      &#165;
                      <span class="sae-num"
                        >{{data.save.expect[expectPeriod].water.cost}}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <div class="saex-icon saex-g"></div>
                <div>
                  <div>
                    <div>{{data.save.expect[expectPeriod].label}}总用气量</div>
                    <div>
                      <span class="sae-num"
                        >{{data.save.expect[expectPeriod].gas.amount}}</span
                      >
                      m<sup>3</sup>
                    </div>
                  </div>
                  <div>
                    <div>费用</div>
                    <div>
                      &#165;
                      <span class="sae-num"
                        >{{data.save.expect[expectPeriod].gas.cost}}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="title">今日逐时能耗</div>
            <div class="realtime-type">
              <div ng-class="etclass[0]" ng-click="changeEnergyType('w')">
                水
              </div>
              <div ng-class="etclass[1]" ng-click="changeEnergyType('e')">
                电
              </div>
              <div ng-class="etclass[2]" ng-click="changeEnergyType('g')">
                气
              </div>
            </div>
            <div
              class="realtime-label"
              ng-show="energyLabel === 'w' || energyLabel === 'g'"
            >
              单位：m<sup>3</sup>
            </div>
            <div class="realtime-label" ng-show="energyLabel === 'e'">
              单位：kWh
            </div>
            <div id="hc-energy-today" class="hc"></div>
          </div>
        </div>
      </div>
      <div class="glass-wrapper equipment-wrapper">
        <div class="glass-left-wrapper">
          <div class="close-icon" onclick="closeWrapper(this)"></div>
          <div>
            <div class="title">今日异常设备事件</div>
            <div class="et-data">
              <div ng-repeat="record in data.equipment.today">
                <div>{{record.type}}</div>
                <div>{{record.time}}</div>
                <div title="{{record.name}}">{{record.name}}</div>
                <div>{{record.area}}</div>
              </div>
            </div>
          </div>
          <div>
            <div class="title">本月异常设备统计</div>
            <div id="hc-exception" class="hc"></div>
          </div>
          <div>
            <div class="title">近三月异常设备</div>
            <div class="et-data">
              <div ng-repeat="record in data.equipment.month">
                <div>{{record.name}}</div>
                <div>{{record.area}}</div>
                <div>{{record.amount}}</div>
                <div>{{record.rate}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="glass-right-wrapper">
          <div class="close-icon" onclick="closeWrapper(this)"></div>
          <div>
            <div class="title">设备概况统计</div>
            <div id="hc-equipment-e" class="hc"></div>
          </div>
          <div>
            <div class="title">各子系统占比</div>
            <div id="hc-subsystem" class="hc"></div>
          </div>
        </div>
      </div>
      <div class="glass-wrapper energy-wrapper big-wrapper">
        <div class="glass-right-wrapper">
          <div class="close-icon" onclick="closeWrapper(this)"></div>
          <div>
            <div class="title">能耗管理</div>
            <div class="tabs">
              <div ng-class="eclass[0]" ng-click="showRealtimeEnergy(1)">
                逐时能耗
              </div>
              <div ng-class="eclass[1]" ng-click="showRealtimeEnergy(0)">
                能耗定额
              </div>
            </div>
            <div ng-show="isShowRealtimeEnergy">
              <div>
                <div class="realtime-type">
                  <div ng-class="rclass[0]" ng-click="changeRealtimeType('w')">
                    水
                  </div>
                  <div ng-class="rclass[1]" ng-click="changeRealtimeType('e')">
                    电
                  </div>
                  <div ng-class="rclass[2]" ng-click="changeRealtimeType('g')">
                    气
                  </div>
                </div>
                <div
                  style="padding: 0"
                  class="realtime-label"
                  ng-show="realtimeLabel === 'w' || realtimeLabel === 'g'"
                >
                  单位：m<sup>3</sup>
                </div>
                <div
                  style="padding: 0"
                  class="realtime-label"
                  ng-show="realtimeLabel === 'e'"
                >
                  单位：kWh
                </div>
                <div id="hc-realtime" class="hc"></div>
              </div>
              <div class="er-data">
                <div>
                  <div>
                    <div>今日最大负荷</div>
                    <div>
                      {{data.energy.realtime.data.todayMax.value}} kWh
                      <span
                        class="rate-arrow"
                        ng-show="data.energy.realtime.data.todayMax.rate != 0"
                        ng-class="data.energy.realtime.data.todayMax.rate > 0 ? 'myrateup' : 'myratedown'"
                      >
                      </span>
                      <span
                        class="rate"
                        ng-show="data.energy.realtime.data.todayMax.rate != 0"
                        >{{data.energy.realtime.data.todayMax.rate}}%</span
                      >
                    </div>
                  </div>
                  <div>
                    <div>今日累计用水</div>
                    <div>
                      {{data.energy.realtime.data.todayWater.value}} m<sup
                        >3</sup
                      >
                      <span
                        class="rate-arrow"
                        ng-show="data.energy.realtime.data.todayWater.rate != 0"
                        ng-class="data.energy.realtime.data.todayWater.rate > 0 ? 'myrateup' : 'myratedown'"
                      >
                      </span>
                      <span
                        class="rate"
                        ng-show="data.energy.realtime.data.todayWater.rate != 0"
                        >{{data.energy.realtime.data.todayWater.rate}}%</span
                      >
                    </div>
                  </div>
                  <div>
                    <div>今日累计用电</div>
                    <div>
                      {{data.energy.realtime.data.todayElectric.value}} kWh
                      <span
                        class="rate-arrow"
                        ng-show="data.energy.realtime.data.todayElectric.rate != 0"
                        ng-class="data.energy.realtime.data.todayElectric.rate > 0 ? 'myrateup' : 'myratedown'"
                      >
                      </span>
                      <span
                        class="rate"
                        ng-show="data.energy.realtime.data.todayElectric.rate != 0"
                        >{{data.energy.realtime.data.todayElectric.rate}}%</span
                      >
                    </div>
                  </div>
                  <div>
                    <div>今日累计用气</div>
                    <div>
                      {{data.energy.realtime.data.todayGas.value}} m<sup>3</sup>
                      <span
                        class="rate-arrow"
                        ng-show="data.energy.realtime.data.todayGas.rate != 0"
                        ng-class="data.energy.realtime.data.todayGas.rate > 0 ? 'myrateup' : 'myratedown'"
                      >
                      </span>
                      <span
                        class="rate"
                        ng-show="data.energy.realtime.data.todayGas.rate != 0"
                        >{{data.energy.realtime.data.todayGas.rate}}%</span
                      >
                    </div>
                  </div>
                </div>
                <div>
                  <div>
                    <div>昨日最大负荷</div>
                    <div>
                      {{data.energy.realtime.data.yesterdayMax.value}} kWh
                    </div>
                  </div>
                  <div>
                    <div>昨日累计用水</div>
                    <div>
                      {{data.energy.realtime.data.yesterdayWater.value}} m<sup
                        >3</sup
                      >
                    </div>
                  </div>
                  <div>
                    <div>昨日累计用电</div>
                    <div>
                      {{data.energy.realtime.data.yesterdayElectric.value}} kWh
                    </div>
                  </div>
                  <div>
                    <div>昨日累计用气</div>
                    <div>
                      {{data.energy.realtime.data.yesterdayGas.value}} m<sup
                        >3</sup
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div ng-show="!isShowRealtimeEnergy">
              <div>
                <div class="realtime-type">
                  <div ng-class="pclass[0]" ng-click="changePlanType('w')">
                    水
                  </div>
                  <div ng-class="pclass[1]" ng-click="changePlanType('e')">
                    电
                  </div>
                  <div ng-class="pclass[2]" ng-click="changePlanType('g')">
                    气
                  </div>
                  <select
                    style="margin: 0 10px; height: 26px"
                    ng-model="selectPlanYear"
                    ng-options="year for year in planYears"
                  ></select>
                </div>
                <div
                  class="realtime-label"
                  ng-show="planLabel === 'w' || planLabel === 'g'"
                >
                  单位：m<sup>3</sup>
                </div>
                <div class="realtime-label" ng-show="planLabel === 'e'">
                  单位：kWh
                </div>
                <div id="hc-plan" class="hc"></div>
              </div>
              <div class="plan-data">
                <div class="pdt">
                  <div>当前理论定额</div>
                  <div>已超出定额12%</div>
                </div>
                <div class="pdm">
                  <div>
                    <div class="pd-num">45万</div>
                    <div>总定额(kWh)</div>
                  </div>
                  <div>
                    <div class="pd-num">60万</div>
                    <div>实际总能耗(kWh)</div>
                  </div>
                </div>
                <div class="pdb">
                  <div>统计时间：2019-01-01 ~ 2019-12-31</div>
                </div>
                <div class="plan-col"></div>
                <div class="realtime-col"></div>
                <div class="extra-col"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="glass-wrapper device-wrapper big-wrapper">
        <div class="glass-right-wrapper">
          <div class="close-icon" onclick="closeWrapper(this)"></div>
          <div>
            <div class="title">{{device.title}}({{device.sid}})</div>
            <div class="tabs">
              <div ng-class="dclass[0]" ng-click="changeDeviceInfo(1)">
                设备属性
              </div>
              <div ng-class="dclass[1]" ng-click="changeDeviceInfo(0)">
                技术参数
              </div>
            </div>
            <div
              ng-show="!device.video"
              class="d-img"
              ng-style="{'background-image': device.image}"
            ></div>
            <div ng-show="device.video" class="d-video">
              <video
                class="video-js"
                muted
                loop
                autoplay
                preload="auto"
                height="300"
                data-setup="{}"
                ng-src="{{device.video}}"
              ></video>
            </div>
            <div class="d-info">
              <div ng-repeat="r in device.info">
                <div>{{r.label}}</div>
                <div>{{r.value}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="glass-wrapper incident-wrapper big-wrapper">
        <div class="glass-right-wrapper">
          <div class="close-icon" onclick="closeWrapper(this)"></div>
          <div>
            <div class="title">{{device.title}}({{device.sid}})</div>
            <div class="tabs">
              <div ng-class="iclass[0]" ng-click="changeIncidentInfo(1)">
                当前报警
              </div>
              <div ng-class="iclass[1]" ng-click="changeIncidentInfo(0)">
                历史报警
              </div>
            </div>
            <div
              ng-show="!device.video"
              class="d-img"
              ng-style="{'background-image': device.image}"
            ></div>
            <div ng-show="device.video" class="d-video">
              <video
                class="video-js"
                muted
                loop
                autoplay
                preload="auto"
                height="300"
                data-setup="{}"
                ng-src="{{device.video}}"
              ></video>
            </div>
            <div class="d-info">
              <div ng-show="device.info.length" ng-repeat="r in device.info">
                <div>{{r.label}}</div>
                <div>{{r.value}}</div>
              </div>
              <div ng-show="device.info.length == 0">
                <div>没有历史记录</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- iframe -->
      <div class="iframe-wrapper">
        <iframe
          width="100%"
          height="100%"
          frameborder="0"
          name="main"
          src="./bim/index.html"
        ></iframe>
      </div>
    </div>
    <script src="./js/home.js"></script>
    <script src="./js/listener.js"></script>
    <script>
      Highcharts.setOptions({
        chart: {
          backgroundColor: "rgba(0, 0, 0, 0)",
        },
        credits: {
          enabled: false,
        },
        title: null,
        yAxis: {
          title: null,
        },
        legend: {
          backgroundColor: "rgba(0, 0, 0, 0)",
          padding: 3,
          itemMarginTop: 5,
          itemMarginBottom: 5,
          itemStyle: {
            fontSize: "14px",
            fontWeight: "normal",
          },
        },
        plotOptions: {
          bar: {
            borderColor: "",
          },
          pie: {
            borderColor: "",
          },
          column: {
            borderColor: "",
          },
          funnel: {
            borderColor: "",
          },
        },
      });
    </script>
    <!-- <script>
		let offset = screen.height - top.document.body.clientHeight;
		if (offset < 10) {
			document.getElementsByClassName('bottom')[0].style.bottom = 0;
		} else {
			document.getElementsByClassName('bottom')[0].style.bottom = offset + 'px';
		}
		top.window.addEventListener('resize', () => {
			let offset = screen.height - top.document.body.clientHeight;
			if (offset < 10) {
				document.getElementsByClassName('bottom')[0].style.bottom = 0;
			} else {
				document.getElementsByClassName('bottom')[0].style.bottom = offset + 'px';
			}
		});
	</script> -->
  </body>
</html>
